<template>
  <div class='content-header'>
    <div class="collapse" @click="handleCollapse">
      <el-icon v-if="isCollapase" :size="20">
        <Expand />
      </el-icon>
      <el-icon v-else :size="20">
        <Fold />
      </el-icon>
    </div>

    <div class="breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="avatar">
      <el-dropdown trigger="click" class="dropDown-wrapper" @command="handleCommand">
        <div class="avatar-wrapper __handCursor">
          <el-avatar
            src="static/img/avatar.png"
            size="small">
          </el-avatar>
          <span>{{ userName }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { Expand, Fold } from '@element-plus/icons-vue'
interface IProps {
  isCollapase: boolean
}
interface IEmit {
  (e: "handleCollapse"): void;
}
const route = useRoute()
const router = useRouter()
const userName = localStorage.getItem('userName')
withDefaults(defineProps<IProps>(), {
  isCollapase: false
})
const emit = defineEmits<IEmit>()


const handleCollapse = () => {
  emit('handleCollapse')
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'logout':
      localStorage.setItem(localStorage.getItem('tokenName') + '_token', '')
      localStorage.setItem('userName', '')
      router.push('/login')
      break;
    default:
      break;
  }
}
</script>

<style scoped lang='scss'>
.content-header {
  position: relative;
  width: 100%;
  height: 55px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  box-sizing: border-box;

  .collapse {
    cursor: pointer;
    height: 100%;
    line-height: 55px;
  }

  .breadcrumb {
    margin-left: 10px;
  }

  .avatar {
    position: absolute;
    right: 15px;

    .avatar-wrapper {
      display: flex;
      align-items: center;

      >span {
        margin-left: 8px;
        font-size: 16px;
      }
    }
  }
}</style>
